<template>
  <div>
    <main>
      <div class="h78">购买VIP订单列表</div>
      <div class="list">
        <div>订单名称</div>
        <div>订单号</div>
        <div>购买时间</div>
        <div>购买天数</div>
        <div>价格</div>
        <div>订单类型</div>
        <div>状态</div>
      </div>
      <!-- 购买的VIP订单列表 -->
      <ul class="viplist">
        <li v-for="(item, index) in vipOrderList" :key="index">
          <span class="vipname">{{ item.orderName }}</span>
          <span class="vipnum">{{ item.id }}</span>
          <span class="buydate">{{ item.paymentDate | formatTime }}</span>
          <span class="resttime">{{ item.days }}</span>
          <span class="price">{{ item.contractAmount }}</span>
          <span class="state">{{ item.contractAmount }}</span>
          <span class="state">已完成</span>
        </li>
      </ul>
      <!-- 购买的课程订单列表 -->
      <!-- <div class="h78 coursetitle">购买的课程订单列表</div>
      <div class="list">
        <div>订单名称</div>
        <div>订单号</div>
        <div>购买时间</div>
        <div>价格</div>
        <div>操作</div>
      </div>
      <ul class="courselist">
        <li>
          <span class="vipname">30天VIP</span>
          <span class="vipnum">2021017523</span>
          <span class="buydate">2021-01-17</span>
          <span class="price">198.00</span>
          <span @click="delHistory" class="del">删除</span>
        </li>
        <li>
          <span class="vipname">30天VIP</span>
          <span class="vipnum">2021017523</span>
          <span class="buydate">2021-01-17</span>
          <span class="price">198.00</span>
          <span @click="delHistory" class="del">删除</span>
        </li>
      </ul> -->
      <!-- 开通会员按钮 -->
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <div class="tovip"><router-link to="/toVip">开通会员</router-link></div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      vipOrderList: [],
      courseOrderList: [],
      total: 0,
      page: 1,
      rows: 1,
      pages:0
    }
  },
  methods: {
    delHistory () { },
    // 获取课程订单列表
    // getCourseOrderList () {
    //   sendPost(api.getOrderList, {
    //     page: 1,
    //     rows: 20,
    //     type: "1"
    //   }).then(res => {
    //     console.log(res);
    //     this.vipOrderList = res.data.list
    //   })
    // },
    // 获取会员订单列表
    getVipOrderList () {
      sendPost(api.getOrderList, {
        page: 1,
        rows: 20,
        type: "2"
      }).then(res => {
        console.log(res);
        this.vipOrderList = res.data.list
        this.total = res.data.total
        this.page = res.data.page
        this.rows = res.data.rows
      })
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      // console.log(value)
      this.page = value
      this.getVipOrderList()
    },
  },
  created () {
    this.getVipOrderList()
    // this.getCourseOrderList()
  },
}
</script>

<style lang="less" scoped>
/deep/.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 0.8125rem;
  min-width: 2.21875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  vertical-align: top;
  box-sizing: border-box;
}
/deep/.el-pager li {
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  min-width: 2.21875rem;
  height: 2.5rem !important;
  width: 2.5rem;
  line-height: 2.5rem;
  box-sizing: border-box;
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    line-height: 2.5rem;
    background-color: #fff; // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #ff5e4e; // 进行修改选中项背景和字体
    color: #fff;
    line-height: 2.5rem;
  }
}
.el-pagination {
  font-size: 1.25rem;
  text-align: center;
  padding-top: 5rem;
}
main {
  width: 56.875rem;
  background-color: #fff;
  padding: 0 1.25rem;
  box-sizing: border-box;
  .h78 {
    height: 4.875rem;
    border-bottom: 1px solid #ededed;
    line-height: 4.875rem;
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 1.875rem;
  }
  .list {
    display: flex;
    div {
      flex: 1;
      text-align: center;
      line-height: 3rem;
      height: 3rem;
      color: #fff;
      background-color: #13bfbf;
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
  .viplist li:hover{
    background-color: #fafafa;
    cursor: pointer;
     color: #ff5e4e;
  }
  .viplist li {
    display: flex;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    color: #666;
    border: 1px solid #eee;
    box-sizing: border-box;
    margin: -1px 0;
    span {
      flex: 1;
      text-align: center;
    }
    .del {
      color: #ff5342;
      cursor: pointer;
    }
  }
  .coursetitle {
    margin-top: 2.5rem;
  }
  .courselist li {
    display: flex;
    height: 3.75rem;
    line-height: 3.75rem;
    font-size: 1rem;
    color: #666;
    border: 1px solid #eee;
    box-sizing: border-box;
    margin-bottom: -0.0625rem;
    span {
      flex: 1;
      text-align: center;
    }
    .del {
      color: #ff5342;
      cursor: pointer;
    }
  }
  .tovip {
    width: 25rem;
    height: 3.75rem;
    border: 1px solid #ff5e4e;
    color: #fff;
    background-color: #ff5e4e;
    margin: 3.75rem auto;
    font-size: 1.4rem;
    text-align: center;
    line-height: 3.75rem;
    border-radius: 0.1875rem;
    overflow: hidden;
    display: flex;
    a {
      color: #fff;
      height: 100%;
      width: 100%;
      line-height: 3.75rem;
    }
  }
}
</style>
